<template>
  <el-dialog title="登录" :visible="visible"  :width="'50%'" @close="cancel"
            >
    <el-form>
      <el-formItem label="邮箱"
                >
        <el-input
                  v-model="params.email"
                  placeholder="邮箱"
                  autocomplete="on">
        </el-input>
      </el-formItem>
      <el-formItem label="密码"
                   >
        <el-input type="password"
                  placeholder="密码"
                 v-model="params.password"
                  autocomplete="on"></el-input>
      </el-formItem>
      <el-formItem v-if="handleFlag === 'register'"
                   label="昵称"
                  >
        <el-input v-model="params.name"
                  placeholder="用户名或昵称"
                  autocomplete="off"></el-input>
      </el-formItem>
      <el-formItem v-if="handleFlag === 'register'"
                   label="手机"
                   >
        <el-input v-model="params.phone"
                  placeholder="手机号"
                  autocomplete="off"></el-input>
      </el-formItem>
      <el-form-item label="验证码" prop="verificationCode" v-if="handleFlag === 'register'">
          <el-input v-model="code" placeholder="请输入验证码" ></el-input>
          <el-button icon="el-icon-mobile-phone" @click="send" style="width: 20%;margin-top:15px" type="success" :disabled="disabled=!show" >  
              <span v-show="show" >获取验证码</span>
              <span v-show="!show" class="count">{{count}} s</span>
          </el-button>
      </el-form-item>
      <el-formItem v-if="handleFlag === 'register'"
                   label="简介">
        <el-input v-model="params.desc"
                  placeholder="个人简介"
                  autocomplete="off"></el-input>
      </el-formItem>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <!-- <el-button type="success"
                 @click="handleOAuth">github 授权登录</el-button> -->
      <el-button v-if="handleFlag === 'login'"
                 :loading="btnLoading"
                 type="primary"
                 @click="handleOk('login')">登 录</el-button>
      <el-button v-if="handleFlag === 'register'"
                 :loading="btnLoading"
                 type="primary"
                 @click="handleOk('register')">注 册</el-button>
    </div>
  </el-dialog>
</template>
<script>
import axios from 'axios'
export default {
  inject: ['reload'],
   props:{
        visible: {
            type: Boolean,
            default: false
           },
        handleFlag:{
            type: String,
            default: false
        }
      },
   data(){
    return {
     params:{
        email: "",
        name: "",
        password: "",
        phone: "",
        desc: "",
        
      },
      btnLoading:false,
      flags:this.handleFlag,
      show: true,  // 初始启用按钮
      count: '',   // 初始化次数
      timer: null,
      code:'',
      codeSec:''
    }
  },
  computed: {
    dialogVisible() {
      console.log(this.visible)
      return this.visible;
    }
    
  },
    methods: {
      send(){
        console.log(this.params.phone,this.params.email)
        const TIME_COUNT = 60; //更改倒计时时间
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer);  // 清除定时器
                    this.timer = null;
                  }
                }, 1000)
              }
               axios.post('api/users/sendCode',{phone:this.params.phone,email:this.params.email})
            .then(data => {
              console.log(data)
              this.codeSec =data.data.data
              this.$message({
                  message: data.data.message,
                  type: data.type
            });
            })
        } ,
      cancel() {
        console.log('hi')
         this.$emit('handleCancel',false)
      },
      handleOk() {
            const reg = new RegExp(
              "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
            ); //正则表达式
            if (!this.params.email) {
              // Message.warning("邮箱不能为空！");
              this.$message({
                message: "邮箱不能为空！",
                type: "warning"
              });
              return;
            } else if (!reg.test(this.params.email)) {
              this.$message({
                message: "请输入格式正确的邮箱！",
                type: "warning"
              });
              return;
            }
            if (this.handleFlag === "register") {
                if (!this.code) {
              // Message.warning("邮箱不能为空！");
              this.$message({
                message: "验证码不能为空！",
                type: "warning"
              });
              return;
            } else if (this.code!=this.codeSec) {
              this.$message({
                message: "验证码错误！",
                type: "warning"
              });
              return;
            }
              if (!this.params.password) {
                this.$message({
                  message: "密码不能为空！",
                  type: "warning"
                });
                return;
              } else if (!this.params.name) {
                this.$message({
                  message: "用户名不能为空！",
                  type: "warning"
                });
                return;
              }
              const re = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
              if (this.params.phone && !re.test(this.params.phone)) {
                this.$message({
                  message: "请输入正确的手机号!",
                  type: "warning"
                });
                return;
              }
            }
            this.submit();
  },
      submit (){
        var that =this
       console.log(this.flags)
        this.btnLoading = true;
         if (this.handleFlag === "register") {
            axios.post('api/users/register',this.params)
            .then(data => {
              console.log(data)
              // this.articlesList = data.data
              this.btnLoading=false
                if(data.data.data=='1'){
                     this.cancel()
                }
              this.$message({
                  message: data.data.message,
                  type: data.type
            });
            })
         }else{
             axios.post('api/users/login',this.params)
            .then(data => {
              console.log(data)
              // this.articlesList = data.data
              this.btnLoading=false
                if(data.data.type=='success'){
                     this.cancel()
                      var userInfo = { userName: data.data.data.userName,userId:data.data.data.userID, }
                      //  setCookie('userInfo','123','10000','/');
                       that.setCookie('userID',data.data.data.userID, 3600);
                       that.setCookie('userName',data.data.data.userName, 3600);
                       window.location.reload()
                }
              this.$message({
                  message: data.data.message,
                  type: data.type
            });
            })
         }
         
      }
    }

  
}
</script>
<style lang="less" scoped>

</style>
